<template>
	<div class="system-user-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" draggable :close-on-click-modal="false" width="780px">
			<el-form :model="state.userForm" ref="userDialogFormRef" label-width="auto">
						<el-row :gutter="35">
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="账号名称" prop="account" :rules="[{ required: true, message: '账号名称不能为空', trigger: 'blur' }]">
									<el-input v-model="state.userForm.account" placeholder="账号名称" clearable />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="真实姓名" prop="realName" :rules="[{ required: true, message: '真实姓名不能为空', trigger: 'blur' }]">
									<el-input v-model="state.userForm.realName" placeholder="真实姓名" clearable />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="手机号码" prop="phone" :rules="[{ required: true, message: '手机号码不能为空', trigger: 'blur' }]">
									<el-input v-model="state.userForm.phone" placeholder="手机号码" clearable />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="出生日期" prop="birthday" :rules="[{ required: true, message: '出生日期不能为空', trigger: 'blur' }]">
									<el-date-picker v-model="state.userForm.birthday" type="date" placeholder="出生日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="w100" />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="昵称">
									<el-input v-model="state.userForm.nickName" placeholder="昵称" clearable />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="性别">
									<el-radio-group v-model="state.userForm.sex">
										<el-radio :label="1">男</el-radio>
										<el-radio :label="2">女</el-radio>
										<el-radio :label="3">其他</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="角色集合" prop="roleIdList" :rules="[{ required: true, message: '角色集合不能为空', trigger: 'blur' }]">
									<el-select v-model="state.userForm.roleIdList" multiple value-key="id" clearable placeholder="角色集合" collapse-tags collapse-tags-tooltip class="w100" filterable>
										<el-option v-for="item in state.roleData" :key="item.id" :label="item.name" :value="item.id" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="账号类型" prop="accountType" :rules="[{ required: true, message: '角色集合不能为空', trigger: 'blur' }]">
									<el-select v-model="state.userForm.accountType" placeholder="账号类型" collapse-tags collapse-tags-tooltip class="w100">
										<!-- <el-option label="系统管理员" :value="888" :disabled="userInfos.accountType != 888 && userInfos.accountType != 999" /> -->
										<el-option label="系统管理员" :value="888" />
										<el-option label="普通账号" :value="777" />
										<el-option label="会员" :value="666" />
									</el-select>
								</el-form-item>
							</el-col>
							<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb5">
								<el-form-item label="年龄">
									<el-input-number v-model="state.userForm.age" placeholder="年龄" class="w100" />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb5">
								<el-form-item label="排序">
									<el-input-number v-model="state.userForm.orderNo" placeholder="排序" class="w100" />
								</el-form-item>
							</el-col> -->
							<el-divider border-style="dashed" content-position="center">
								<div style="color: #b1b3b8">机构组织</div>
							</el-divider>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="所属机构" prop="orgId" :rules="[{ required: true, message: '所属机构不能为空', trigger: 'blur' }]">
									<el-cascader
										:options="props.orgData"
										:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name', expandTrigger: 'hover' }"
										placeholder="所属机构"
										clearable
										class="w100"
										v-model="state.userForm.orgId"
									>
										<template #default="{ node, data }">
											<span>{{ data.name }}</span>
											<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
										</template>
									</el-cascader>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="职位" prop="posId" :rules="[{ required: true, message: '职位名称不能为空', trigger: 'blur' }]">
									<el-select v-model="state.userForm.posId" placeholder="职位" class="w100">
										<el-option v-for="d in state.posData" :key="d.id" :label="d.name" :value="d.id" />
									</el-select>
								</el-form-item>
							</el-col>
							<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="工号">
									<el-input v-model="state.userForm.jobNum" placeholder="工号" clearable />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="入职日期">
									<el-date-picker v-model="state.userForm.joinDate" type="date" placeholder="入职日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="w100" />
								</el-form-item>
							</el-col> -->
							<el-divider border-style="dashed" content-position="center">
								<div style="color: #b1b3b8">附属机构</div>
							</el-divider>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-button icon="ele-Plus" type="primary" plain @click="addExtOrgRow"> 增加附属机构 </el-button>
								<span style="font-size: 12px; color: gray; padding-left: 5px"> 具有相应组织机构的数据权限 </span>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<template v-if="state.userForm.extOrgIdList != undefined && state.userForm.extOrgIdList.length > 0">
									<el-row :gutter="35" v-for="(v, k) in state.userForm.extOrgIdList" :key="k">
										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
											<el-form-item label="机构" :prop="`extOrgIdList[${k}].orgId`" :rules="[{ required: true, message: `机构不能为空`, trigger: 'blur' }]">
												<template #label>
													<el-button icon="ele-Delete" type="danger" circle plain size="small" @click="deleteExtOrgRow(k)" />
													<span class="ml5">机构</span>
												</template>
												<el-cascader
													:options="props.orgData"
													:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name', expandTrigger: 'hover' }"
													placeholder="机构组织"
													clearable
													class="w100"
													v-model="state.userForm.extOrgIdList[k].orgId"
												>
													<template #default="{ node, data }">
														<span>{{ data.name }}</span>
														<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
													</template>
												</el-cascader>
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
											<el-form-item label="职位" :prop="`extOrgIdList[${k}].posId`" :rules="[{ required: true, message: `职位不能为空`, trigger: 'blur' }]">
												<el-select v-model="state.userForm.extOrgIdList[k].posId" placeholder="职位名称" class="w100">
													<el-option v-for="d in state.posData" :key="d.id" :label="d.name" :value="d.id" />
												</el-select>
											</el-form-item>
										</el-col>
									</el-row>
								</template>
								<el-empty :image-size="40" description="空数据" v-else></el-empty>
							</el-col>
						</el-row>
					</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useRoleApi } from '/@/api/role';
import { usePosApi } from '/@/api/pos';
import { useOrgApi } from '/@/api/org';
import { useUserApi } from '/@/api/user';

const props = defineProps({
	title: String,
	orgData: Array<OrgItem>,
});
// 定义子组件向父组件传值/事件
const emits = defineEmits(['handleQuery']);

// 定义变量内容
const userDialogFormRef = ref();
const state = reactive({
	loading: false,
	userForm: {} as userForm,
	orgTreeData: [] as Array<OrgItem>,
	posData: [] as Array<PosForm>,
	roleData: [] as Array<roleForm>,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

onMounted(async () => {
	state.loading = true;
	usePosApi().getPosList().then(async (res:AjaxResult) =>{
		const _data:Array<PosForm> = res.data;
		state.posData = _data;
	});
	useRoleApi().getRoleList().then(async (res:AjaxResult) => {
		const _data:Array<RoleForm> = res.data;
		state.roleData = _data;
		// state.userForm.roleIdList = _data;

	})
	// var res = await getAPI(SysPosApi).apiSysPosListGet();
	// state.posData = res.data.result ?? [];
	// var res1 = await getAPI(SysRoleApi).apiSysRoleListGet();
	// state.roleData = res1.data.result ?? [];
	state.loading = false;
});


// 打开弹窗
const openDialog = (type: string, row: UserForm) => {
	state.userForm = row;
	if (type === 'edit' && row.id!=undefined && row.id>0) {
		state.dialog.title = '修改用户';
		state.dialog.submitTxt = '修 改';
		useUserApi().getUserRoleIdList(row.id).then(async (res:AjaxResult) =>{
			state.userForm.roleIdList = res.data;
		});
		useUserApi().getUserExtOrgIdList(row.id).then(async (res:AjaxResult) =>{
			state.userForm.extOrgIdList = res.data;
		});
	} else {
		state.dialog.title = '新增用户';
		state.dialog.submitTxt = '新 增';
		state.userForm.accountType=777;
		// 清空表单，此项需加表单验证才能使用
		// nextTick(() => {
		// 	userDialogFormRef.value.resetFields();
		// });
	}
		state.userForm = row;
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	userDialogFormRef.value.validate(async (valid: boolean) =>{
		if(!valid) return;
		if(state.userForm.id != undefined && state.userForm.id > 0){
			useUserApi().editUser(state.userForm).then(async (res:AjaxResult) => {
				if (res.success == true) {
					ElMessage.success('更新成功');
					emits('handleQuery');
					closeDialog();
				}
				else {
					ElMessage.warning('更新失败：' + res.message);
				}
			});
		}
		else{
			useUserApi().addUser(state.userForm).then(async (res:AjaxResult) => {
				if (res.success == true) {
					ElMessage.success('新增成功');
					emits('handleQuery');
					closeDialog();
				}
				else {
					ElMessage.warning('更新失败：' + res.message);
				}
			});
		}
	});
};
// 增加附属机构行
const addExtOrgRow = () => {
	if (state.userForm.extOrgIdList == undefined) state.userForm.extOrgIdList = [];
	state.userForm.extOrgIdList?.push({});
};

// 删除附属机构行
const deleteExtOrgRow = (k: number) => {
	state.userForm.extOrgIdList?.splice(k, 1);
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
